import type { CSSProperties } from "vue";
import { cloneDeep } from "lodash";
import type { ColProps } from "@arco-design/web-vue";
import {
  definitionInput,
  definitionFormNameId,
  definitionSwitch,
  definitionSelect,
} from "@/components/custom/incident";
export type ContainerType =
  | "form"
  | "container"
  | "common"
  | "expert"
  | "chart"
  | "other"; // 表单、容器、普通组件、高级组件、图表组件、其他
export interface Container {
  id?: string;
  // 名称
  name?: string;
  // 图标
  icon?: () => void;
  // 类型
  type: ContainerType;
  // 标签
  label: string;
  // 描述
  description: string;
  // 是否隐藏
  hidden: boolean;
  // 是否拖拽
  draggable: boolean;
  // 是否为表单组件
  isform: boolean;
  // 预览
  preview: () => void;
  // 渲染
  render: (props: any, context: Container, app: AppProps) => void;
  // 子组件
  children?: Container[];
  // 属性
  props?: any;
  // 表单属性
  formItem?: any;
  // 样式
  style?: CSSProperties;
  // 栅格
  grid?: ColProps;
  // 事件
  events?: any;
  // 插槽
  slots?: any[];
  // 状态
  state?: any[];
}

export type Events = {
  e: any;
  config: Container;
  app: {
    [key: string]: AppProps;
  };
};

export interface AppProps {
  onText: (value: string) => void;
  onClick: () => void;
  onChange: () => void;
  onInput: () => void;
  onBlur: () => void;
  onFocus: () => void;
  onMouseEnter: () => void;
  onMouseLeave: () => void;
  onMouseDown: () => void;
  onMouseUp: () => void;
  onKeyDown: () => void;
  onKeyUp: () => void;
  onKeyPress: () => void;
  onSubmit: () => void;
  onReset: () => void;
  onScroll: () => void;
  onWheel: () => void;
  onCopy: () => void;
  onCut: () => void;
  onPaste: () => void;
  onDrag: () => void;
  onDragStart: () => void;
  onDragEnd: () => void;
  onDragEnter: () => void;
  onDragLeave: () => void;
  onDragOver: () => void;
}

// 自定义组件公用方法
export const componentContainer: (
  container: Container,
  componentName: string
) => Container = (container: Container, componentName: string) => {
  // 组件名称
  container.id = "";
  container.name = container.name || componentName;
  container.style = customStyle(container.style);
  container.grid = container.grid || { span: 10, offset: 2 };
  container = isFormComponent(container);
  return container;
};
// 是否为表单组件
export const isFormComponent = (container: Container) => {
  if (!container.hidden && container.isform) {
    container.formItem = {
      field: definitionFormNameId({
        type: "string",
        label: "绑定字段",
        placeholder: "请输入绑定字段",
        defaultValue: "",
      }),
      label: definitionInput({
        type: "string",
        label: "标签",
        placeholder: "请输入内容",
        defaultValue: "标签",
      }),
      tooltip: definitionInput({
        type: "string",
        label: "提示",
        placeholder: "请输入内容",
        defaultValue: "",
      }),

      help: definitionInput({
        type: "string",
        label: "帮助",
        placeholder: "请输入内容",
        defaultValue: "",
      }),
      extra: definitionInput({
        type: "string",
        label: "额外",
        placeholder: "请输入内容",
        defaultValue: "",
      }),
      "asterisk-position": definitionSelect({
        type: "string",
        label: "必填位置",
        placeholder: "请输入内容",
        defaultValue: "start",
        options: [
          {
            label: "前",
            value: "start",
          },
          {
            label: "后",
            value: "end",
          },
        ],
      }),
      required: definitionSwitch({
        type: "boolean",
        label: "必填",
        defaultValue: false,
      }),

      "show-colon": definitionSwitch({
        type: "boolean",
        label: "冒号",
        defaultValue: false,
      }),
      "no-style": definitionSwitch({
        type: "boolean",
        label: "无样式",
        defaultValue: false,
      }),
      disabled: definitionSwitch({
        type: "boolean",
        label: "禁用",
        defaultValue: false,
      }),
    };
  }

  return container;
};
// 自定义样式
export const customStyle: (style: CSSProperties) => CSSProperties = (style) => {
  return { width: "100%", ...style };
};
// 自定义全局组件
export const customGlobalComponent = () => {
  const model: any = import.meta.glob("./*/index.tsx", { eager: true });
  const component = {};
  Object.keys(model).forEach((key) => {
    const componentName = key.replace("./", "").replace("/index.tsx", "");
    component[componentName] = model[key]?.default;
    component[componentName] = componentContainer(
      component[componentName],
      componentName
    );
  });
  console.log(component, "自定义组件");

  return cloneDeep(component);
};
